<template>
  <div class="manus-app">
    <el-page-header @back="goBack" title="返回" content="AI 超级智能体">
      <template #extra>
        <span class="chat-id">会话ID: {{ chatId }}</span>
      </template>
    </el-page-header>
    <ChatRoom
      :api-endpoint="'http://localhost:8123/ai-agent/ai/manus/chat'"
      :chat-id="chatId"
      ai-avatar="/manus-avatar.png"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ChatRoom from '../components/ChatRoom.vue'

const router = useRouter()
const chatId = ref('')

const generateChatId = () => {
  return 'manus_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
}

const goBack = () => {
  router.push('/')
}

onMounted(() => {
  chatId.value = generateChatId()
})
</script>

<style scoped>
.manus-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
}

.el-page-header {
  padding: 1rem;
  background: #181c20;
  border-bottom: 1.5px solid var(--border-color);
  box-shadow: var(--shadow);
}

.chat-id {
  font-size: 0.9rem;
  color: var(--text-light);
  background: #23272e;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
}

@media (max-width: 768px) {
  .el-page-header {
    padding: 0.75rem;
  }

  .chat-id {
    display: none;
  }
}

:deep(.el-page-header__content),
:deep(.el-page-header__title) {
  color: var(--primary-color) !important;
  font-weight: bold;
  letter-spacing: 1px;
}
</style> 